<script setup>
//引入依赖
import Map from 'ol/Map';
import TileLayer from 'ol/layer/Tile';
import { BingMaps, TileArcGISRest, XYZ } from "ol/source";
import View from 'ol/View';
import { ref ,onMounted} from "vue";
import { fromLonLat, transform } from "ol/proj";

const map = ref(null);

const initMap = () => {
  map.value = new Map({
    target:'map',
    layers: [
      //加载arcgis的MapServer地图
      //arcgis的地图影像都是通过地图影像切片，将数据裁切成512*512/256*256的大小的图片，加载
      new TileLayer({
        source: new TileArcGISRest({
          url: 'https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer'
        })
      }),
      new TileLayer({
        source: new XYZ({
          url: 'http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}',
        })
      })
    ],
    view:new View({
      center: fromLonLat([-109, 46.5]),
      zoom: 6
    })
  })
}

onMounted(initMap)
</script>

<template>
  <!--地图挂载dom-->
  <div id="map">
  </div>
</template>

<style scoped>
#map {
  width: 100%;
  height: 100%;
}
</style>